<template>
  <section class="index-container-shop shop-0" @click="bindShopClick(shop)">
        <div class="logo-container">
          <div class="logo-main_1kulr_0">
            <img :alt="shop.name" class="logo-logo" :src="shop.image_path|shopLogoImgFormat" />
            <span class="logo-statusTip logo-statusTipSmall" v-if="false" style="background-color: rgb(84, 206, 117);">10:00开始配送</span>
          </div>
          <div class="logo-newShop" v-if="shop.is_new"><span>新店</span></div>
        </div>
        <div class="index-main">
          <section class="index-line"><h3 class="index-shopname" v-bind:class="{'index-premium':shop.is_premium}"><span>{{shop.name}}</span>
          </h3>
            <div class="index-supportWrap">
              <div class="activity-container activity-containerNoWrap" v-for="(support, index) in shop.supports" :key="index">
                <i class="activity-activityIcon activity-icononly"
                style="border-color: rgb(221, 221, 221);" :style="{'color':'#'+support.icon_color}" :title="support.description">
                  {{support.icon_name}}
              </i>
              </div>
            </div>
          </section>
          <section class="index-line">
            <div class="index-rateWrap">
              <div class="rating-wrapper">
                <div class="rating-max">
                  <Star-Rating :score = "shop.rating"></Star-Rating>
                </div>
              </div>
              <span class="index-rate">{{shop.rating}}</span> <span>月售{{shop.recent_order_num}}单</span></div>
            <div class="index-deliveryWrap"><!----> <span
              class="index-iconDelivery index-hollow" v-if="shop.delivery_mode"><span>{{shop.delivery_mode.text}}</span></span></div>
          </section>
          <section class="index-line">
            <div class="index-moneylimit"><span>¥{{shop.float_minimum_order_amount}}起送</span> <span>
          配送费¥{{shop.float_delivery_fee}}
        </span> <span>{{shop.average_cost}}</span></div>
            <div class="index-timedistanceWrap"><span class="index-distanceWrap">{{shop.distance}}m</span> <span
              class="index-timeWrap">
          {{shop.order_lead_time}}分钟
        </span></div>
          </section>
          <section class="index-activities" v-if="shop.activities && shop.activities.length>0">
            <div class="index-activityList index-needexpand">
              <div class="activity-container activity-containerWrap" :key="index" v-for="(activity,index) in shop.activities.slice(0, showCount)">
                <i class="activity-activityIcon" style="color:#fff" :style="{'background':'#'+activity.icon_color,'border-color':'#'+activity.icon_color}">{{activity.icon_name}}</i>
                <span class="activity-description"><span>{{activity.tips}}</span></span>
              </div>
            </div>
            <div class="index-activityBtn"  @click="activityClickHandler(shop,$event)">
              {{shop.activities.length}}个活动
              <svg class="">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#activity-more"></use>
              </svg>
            </div>
          </section>
        </div>
      </section>
</template>

<script>
  import StarRating from '../common/StarRating.vue';
  export default {
    name: 'ShopItem',
    data () {
      return {
        shopStaticPath: '/static/images/shop/',
        expanded: false
      }
    },
    props: {
      shop: {
        type: Object,
        default: 5
      }
    },
    computed: {
      showCount: function () {
        if (this.expanded) {
          return this.shop.activities.length
        }
        if (this.shop.activities.length > 2) {
          return 2
        } else {
          return this.shop.activities.length
        }
      }
    },
    filters: {
      shopLogoImgFormat: function (value) {
        let extName = 'jpeg';
        let extTmp = value.slice(-3);
        if (extTmp === 'png' || extTmp === 'gif' || extTmp === 'jpg') {
          extName = extTmp
        }
        return `https://fuss10.elemecdn.com/${value.charAt(0)}/${value.substr(1, 2)}/${value.slice(3)}.${extName}?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/`
      }
    },
    methods: {
      bindShopClick: function (shop) {
        console.log(this);
        this.$router.push('ShopDetail/' + shop.id);
        /*location.href = '/#/ShopDetail/' + shop.id*/
      },
      activityClickHandler: function (shop, event) {
        event.stopPropagation();
        this.expanded = !this.expanded
      }
    },
     components: {StarRating}
  }
</script>

<style>

</style>

